<template>
	<view class="receive-success">
		<navBar title="提交成功" justCenter="justCenter"></navBar>
		<scroll-view scroll-y="true" class="scroll-Y" :style="{height:heightValue+'px'}">
			<view class="receive-top-nav-title">
				注：改手机号可再次做任务，赶快开始吧！
			</view>
			<view class="receive-content">
				<img src="https://www.jk334.cn/img/submit-fare.png" alt="" class="receive-top-nav-content-icon" />
			</view>
			<view style="text-align: center;">
				提交成功
			</view>
			<view class="receive-details-btn" @click="startTask">
				使用该手机号，开始新任务
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import navBar from '@/components/navBar/navBar.vue';
	import {
		getHeight
	} from '@/utiles/utils.js';
	import {
		getStore
	} from '@/store/store.js'
	export default {
		components: {
			navBar
		},
		data() {
			return {
				heightValue: 0,
			}
		},
		onShow() {
			const windowHeight = getHeight().windowHeight //100vh
			const statusBarHeight = getHeight().statusBarHeight //tabBar高度
			const navBareight = getHeight().navBareight //头部高度
			this.heightValue = windowHeight - statusBarHeight - navBareight
		},
		methods: {
			startTask() {
				getStore('userInfo', {})
				uni.clearStorageSync();
				uni.switchTab({
					url: '/pages/Home/Home'
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.receive-success {
		background-image: url("https://www.jk334.cn/img/home-bg.png");
		background-size: 100% 332rpx;
		background-repeat: no-repeat;
		font-family: PingFang SC, PingFang SC;


		.receive-top-nav-title {
			font-size: 26rpx;
			font-weight: 400;
			color: #FF2626;
			margin-top: 60rpx;
			padding: 0 70rpx;
		}

		.receive-content {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin:80rpx 0 30rpx 0;
		}

		.receive-top-nav-content-icon {
			width: 422rpx;
			height: 240rpx;
			margin-bottom: 30rpx;
		}

		.receive-details-btn {
			font-size: 28rpx;
			font-weight: bold;
			color: #FFFFFF;
			margin: 0 auto;
			margin-top: 140rpx;
			width: 520rpx;
			height: 80rpx;
			background: linear-gradient(90deg, #F93A7D 0%, #F31C2B 100%);
			box-shadow: 0px 6rpx 20rpx 2rpx #E6E6E6;
			border-radius: 108rpx;
			text-align: center;
			line-height: 80rpx;
		}
	}
</style>